<template>
  <div>
    <div class="demo-image__placeholder">
      <div class="block">
        <div>
          <span class="demonstration"><h2>{{artic.articleName}}</h2></span>
        </div>
        <div>
          <span class="demonstration"><h2>作者:{{user.username}}</h2></span>
          <el-badge class="item">
            <el-button size="small" @click="dialogVisible = true">点我去评论</el-button>
          </el-badge>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-badge :value="artic.likeNumber" class="item">
            <el-button size="small" @click="addLikeNumber">点赞</el-button>
          </el-badge>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-badge  class="item">
            <el-button size="small" @click="addFactority" >{{fac}}</el-button>
          </el-badge>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <el-badge  class="item">
            <el-button size="small" @click="addArticleCart" v-if="artic.price>0" >{{payStatus}}</el-button>
          </el-badge>
        </div>
        <div>
          <el-image :src="artic.pic" style="width: 1000px;height:500px"></el-image>
        </div>

      </div>
      <div style="padding-top:30px;word-spacing: 8px;line-height: 20px" v-html="str">
          {{str}}
      </div>
    </div>
    <!--<el-button :plain="true" @click="openVn">{{VNode}}</el-button>-->

    <div>
      <el-dialog
        title="评论"
        :visible.sync="dialogVisible"
        width="30%"
        >
        <span>
          <el-input
            type="textarea"
            :rows="3"
            placeholder="请输入内容"
            v-model="articleComment.content">
          </el-input>
        </span>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="addArticleCommend">确 定</el-button>
  </span>
      </el-dialog>
    </div>

    <div >
    </div>
      <div v-for="item in articleComments">
        <el-divider></el-divider>
        <div>
          <span>用户:{{item.userName}}</span>
          <span>评论时间:{{item.createTime}}</span>
        </div>
        <span>{{item.content}}</span>
      </div>
  </div>
</template>

<script>
  import axios from 'axios';
  import vueCookie from 'vue-cookie';
    export default {
        name: "articleInfo",
        data(){
          return{
            artic:{},
            str:'',
            user:{},
            userId:'',
            fac:'',
            payStatus:'加入购物车',
            VNode:'',
            dialogVisible: false,
            articleComment:{
              articleId:'',
              content:''
            },
            articleComments:[],
          }
        },
        methods:{
          findById(){
            var id = this.$route.params.id;
            axios.post('http://localhost:8088/article/findById',{id:id}).then(res=>{
              if(res.data.code==0){
                this.artic=res.data.data;
                this.str=res.data.data.content;
                this.userId=res.data.data.uid;
                /*获取文章作者信息*/
                axios.post('http://localhost:8088/user/findUserById',{id:this.userId}).then(res=>{
                  if(res.data.code==0){
                    this.user=res.data.data;
                  }
                });
                axios.post('http://localhost:8088/article/verifyFactority',{id:this.artic.id}).then(res=> {
                  if (res.data.code == 0) {
                    this.fac = '已收藏';
                  } else {
                    this.fac = '收藏';
                  }
                });
                axios.post('http://localhost:8088/article/verifyFactority',{id:this.userId}).then(res=>{
                  if(res.data.code==0){
                    this.payStatus='已支付';
                  }
                })
              }
            })
          },
          findByIdUserLogin(){
            var id = this.$route.params.id;
            axios.post('http://localhost:8088/article/findByIdUserLogin',{id:id}).then(res=>{
              if(res.data.code==0){
                this.artic=res.data.data;
                this.str=res.data.data.content;
                this.userId=res.data.data.uid;
                this.findAllArticleCommend();
                /*获取文章作者信息*/
                axios.post('http://localhost:8088/user/findUserById',{id:this.userId}).then(res=>{
                  if(res.data.code==0){
                    this.user=res.data.data;
                  }
                });
                axios.post('http://localhost:8088/article/verifyFactority',{id:this.artic.id}).then(res=> {
                  if (res.data.code == 0) {
                    this.fac = '已收藏';
                  } else {
                    this.fac = '收藏';
                  }
                });
                axios.post('http://localhost:8088/article/verifyFactority',{id:this.userId}).then(res=>{
                  if(res.data.code==0){
                    this.payStatus='已支付';
                  }
                })
              }else{
                this.VNode=res.data.message;
                this.openVn();
                this.$router.push(('articleOrder'))
              }
            })
          },
          addLikeNumber(){
            axios.post('http://localhost:8088/article/addLikeNumber',{id:this.artic.id}).then(res=>{
              if(res.data.code==0){
                this.artic.likeNumber=res.data.data;
              }
            })
          },
          addFactority(){
            axios.post('http://localhost:8088/article/addFactority',{id:this.artic.id}).then(res=>{
              if(res.data.code==0){
                this.fac='已收藏';
              }
            })
          },
          addArticleCart(){
            if(this.payStatus=='加入购物车'){
              axios.post("http://localhost:8088/articleCart/addArticleCart",{id:this.artic.id}).then(res=>{
                if(res.data.code==0){
                    this.$router.push('articleCart');
                  }
              })

            }
          },
          openVn() {
            const h = this.$createElement;
            this.$message({
              message: h('p', null, [
                h('span', null, '提示消息 '),
                h('i', { style: 'color: teal' }, this.VNode)
              ])
            });
          },
          addArticleCommend() {
            this.articleComment.articleId=this.artic.id;
            axios.post('http://localhost:8088/article/addArticleCommend',this.articleComment).then(res=>{
              if(res.data.code==0){
                alert(res.data.message);
                this.dialogVisible=false;
                this.findByIdUserLogin();
              }
            })
          },
          findAllArticleCommend(){
            axios.post('http://localhost:8088/article/findAllArticleCommend',{id:this.artic.id}).then(res=>{
              if(res.data.code==0){
                this.articleComments=res.data.data;
              }
            })
          }
        },
        mounted() {
          let token = vueCookie.get("token");
          if(token==null){
            /*如果用户未登录执行该方法*/
            this.findById();
          }else{
            /*如果用户登录执行该方法*/
            this.findByIdUserLogin();
          }
        }
    }
</script>

<style scoped>

</style>
